<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>商品编号:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="number" placeholder="商品编号"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>商品名称:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="productName" placeholder="商品名称"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>厂家:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="productFirm" placeholder="厂家"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>商品类别:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="productClass" placeholder="商品类别"></el-input>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>建议采购价:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input-number :controls="false" v-model="productBuyer" placeholder="建议采购价"></el-input-number>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>商品销售价:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input-number :controls="false" v-model="productSell" :rows="3" placeholder="商品销售价"></el-input-number>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>商品图片选择:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-upload
                class="avatar-uploader"
                name="fileName"
                :action='uploadUrl'
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img style="width: 100px;height: 100px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="3" class="labClass">
          <div class="grid-content bg-purple">
          </div>
        </el-col>
      </el-row>
      <p/>


      <el-button type="success" @click="addNewPro">添加</el-button>
    </el-card>


  </div>
</template>


<script>
export default {
  name: "addProduct",
  data() {
    return {
      supplierId: '',

      number: '',
      productName: '',
      productFirm: '',
      productClass: '',
      productBuyer: '',
      productSell: '',

      uploadUrl: "drp/product/ImgPost",
      imageUrl: '',
      imgPath: ''
    }
  },
  methods: {
    //上传前
    handleAvatarSuccess(res, file) {
      //上传成功
      if (res != "no") {
        console.log(res)
        this.imgPath = res
        this.$message.success('文件上传成功');
      } else {
        this.$message.success("文件上传失败");
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //上传图片之后
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addNewPro() {
      if (this.number != '' && this.productName != '' && this.productFirm != '' &&
          this.productClass != '' && this.productBuyer != '' && this.productSell != '') {
        let formData = new FormData()
        formData.append("number", this.number)
        formData.append("productName", this.productName)
        formData.append("productFirm", this.productFirm)
        formData.append("productClass", this.productClass)
        formData.append("productBuyer", this.productBuyer)
        formData.append("productSell", this.productSell)
        formData.append("imgPath", this.imgPath)
        formData.append("supplierId", this.supplierId)
        this.$axios.post("drp/product/addProduct", formData).then(
            r => {
              if (r.data == "ok") {
                location.href = "/index"
              } else {
                this.$message.warning(r.data)
              }
            }
        )
      } else {
        this.$message.error("内容不能有空")
      }
    },
    init(supplierId) {
      this.supplierId = supplierId
    },
    guanbi(){
      this.addProduct1=false
      this.addProduct2=false
    }
  }
}
</script>

<style scoped>

</style>